<template>
  <div class="rounded-[8px] base-big-bg-color">
    <!-- shadow-[0_1px_0_0_#eff3fe] -->
    <div class="flex items-center justify-between px-[16px] py-[12px] title card-shadow">
      <slot name="title">
        <div class="text-[16px] leading-[22px]">{{ title }}</div>
      </slot>
      <div class=""></div>
    </div>
    <div class="bg-[var(--el-bg-color))] flex-1 overflow-hidden">
      <slot></slot>
    </div>
    <!-- <div class="base-big-bg-color flex-1 overflow-hidden">
      <slot></slot>
    </div> -->
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
})
</script>
<style lang="scss" scoped>
.card-shadow {
  --tw-shadow: 0 1px 0 0 var(--base-link-color);
  --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 var(--base-link-color)), var(--tw-ring-shadow, 0 0 var(--base-link-color)), var(--tw-shadow);
}
</style>
